<template>
  <Form
    ref="loginForm"
    label-position="left"
    :label-width="100"
    :model="form"
    :rules="rule"
  >
    <FormItem
      prop="username"
      label="登录名称"
    >
      <Input
        v-model="form.username"
        type="text"
        placeholder="用户名/邮箱/手机号"
        prefix="md-person"
        size="large"
      />
    </FormItem>
    <FormItem
      prop="password"
      label="密码"
    >
      <Input
        v-model="form.password"
        type="password"
        placeholder="请输入密码"
        prefix="md-lock"
        size="large"
        password
      />
    </FormItem>
    <!-- <FormItem
      prop="captchaValue"
      label="验证码"
      class="form-item-captcha"
      :show-message="captchaShowMsg"
    >
      <Input
        v-model="form.captchaValue"
        type="text"
        placeholder="请输入验证码"
        size="large"
        :icon="captchaPass?'md-checkmark':'md-alert'"
        @on-change="handleCaptchaTyping"
        @on-blur="handleCaptchaOnBlur"
      />
      <div
        class="captcha"
        @click="refreshCaptcha"
        v-html="captchaImg"
      />
    </FormItem> -->
    <FormItem>
      <!-- <Button
        type="primary"
        :disabled="!captchaPass"
        :loading="loading"
        @click="handleSubmit"
      >
        登录
      </Button> -->
      <Button
        type="primary"
        :loading="loading"
        @click="handleSubmit"
      >
        登录
      </Button>
    </FormItem>
  </Form>
</template>

<script lang="ts">
import 'reflect-metadata'
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Form } from 'view-design'
// import { CaptchaChallenge, getCaptcha, challenge } from '@/api/captcha'

@Component({
  name: 'LoginForm'
})
export default class extends Vue {
  @Prop() loading!: boolean;
  private form = {
    username: '',
    password: ''
    // captchaValue: ''
  };

  // private captchaImg = '<img alt="验证码">';
  // private captchaChallenger: CaptchaChallenge = new CaptchaChallenge()
  // private captchaPass = false
  // private captchaShowMsg = true

  private rule = {
    username: [
      {
        required: true,
        type: 'string',
        message: '请输入登录名称',
        trigger: 'blur'
      }
    ],
    password: [
      {
        required: true,
        type: 'string',
        message: '请输入密码',
        trigger: 'blur'
      },
      { type: 'string', min: 8, message: '密码不少于8个字符', trigger: 'blur' }
    ],
    // captchaValue: [
    //   {
    //     required: true,
    //     type: 'string',
    //     message: '请输入验证码',
    //     trigger: 'blur'
    //   }
    // ]
  };

  // mounted () {
  //   this.refreshCaptcha()
  // }

  private handleSubmit () {
    (this.$refs.loginForm as Form).validate(valid => {
      if (valid) {
        // this.$emit('on-submit', { ...this.form, captchaKey: this.captchaChallenger.key })
        this.$emit('on-submit', this.form)
      }
    })
  }

  // private handleCaptchaOnBlur () {
  //   this.captchaShowMsg = true
  // }

  // private async handleCaptchaTyping () {
  //   this.captchaShowMsg = false
  //   this.captchaChallenger.value = this.form.captchaValue
  //   this.captchaPass = await this.challengeCaptcha(this.captchaChallenger)
  // }

  // private async refreshCaptcha () {
  //   const { data } = await getCaptcha()
  //   this.captchaChallenger.key = data.key
  //   this.captchaImg = data.captcha
  // }

  // private async challengeCaptcha (challenger: CaptchaChallenge) {
  //   return await challenge(challenger).then(data => {
  //     return data.data
  //   }).catch(e => {
  //     console.log(e)
  //     return false
  //   })
  // }
}
</script>

<style lang="less" scoped>
@import "../../styles/theme";

.ivu-form {
  width: 480px;
}

.ivu-input {
  color: black;
}

// .form-item-captcha {
//   /deep/ .ivu-form-item-content {
//     display: flex;
//     align-items: space-around;
//     align-content: center;
//     .captcha{
//       margin-left: 16px;
//       width: 120px;
//       height: 40px;
//       svg {
//         width: 120px;
//         height: 40px;
//         background: @white;
//       }
//     }
//   }
// }
</style>
